{% extends "base.html" %}

{% block title %}个人资料 - 镜像传输系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card shadow">
            <div class="card-header bg-info text-white">
                <h4 class="mb-0">
                    <i class="fas fa-user me-2"></i>个人资料
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center mb-3">
                        <div class="avatar-placeholder">
                            <i class="fas fa-user-circle fa-5x text-muted"></i>
                        </div>
                        <div class="mt-2">
                            {% if current_user.is_admin %}
                            <span class="badge bg-warning">管理员</span>
                            {% else %}
                            <span class="badge bg-secondary">普通用户</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-8">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold"><i class="fas fa-user me-2"></i>用户名:</td>
                                <td>{{ current_user.username }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold"><i class="fas fa-envelope me-2"></i>邮箱:</td>
                                <td>{{ current_user.email }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold"><i class="fas fa-calendar me-2"></i>注册时间:</td>
                                <td>{{ current_user.created_at.strftime('%Y-%m-%d %H:%M:%S') if current_user.created_at else '未知' }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold"><i class="fas fa-clock me-2"></i>最后登录:</td>
                                <td>{{ current_user.last_login.strftime('%Y-%m-%d %H:%M:%S') if current_user.last_login else '首次登录' }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold"><i class="fas fa-shield-alt me-2"></i>账户状态:</td>
                                <td>
                                    {% if current_user.is_active %}
                                    <span class="badge bg-success">正常</span>
                                    {% else %}
                                    <span class="badge bg-danger">禁用</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                <hr>
                
                <div class="row">
                    <div class="col-md-6">
                        <a href="{{ url_for('auth.change_password') }}" class="btn btn-warning w-100">
                            <i class="fas fa-key me-2"></i>修改密码
                        </a>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-outline-info w-100" onclick="exportUserData()">
                            <i class="fas fa-download me-2"></i>导出数据
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计信息卡片 -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fas fa-tasks fa-2x text-primary mb-2"></i>
                        <h5 class="card-title">{{ current_user.tasks|length }}</h5>
                        <p class="card-text">传输任务</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                        <h5 class="card-title">{{ current_user.tasks|selectattr('status', 'equalto', 'completed')|list|length }}</h5>
                        <p class="card-text">成功任务</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fas fa-exclamation-triangle fa-2x text-warning mb-2"></i>
                        <h5 class="card-title">{{ current_user.tasks|selectattr('status', 'equalto', 'failed')|list|length }}</h5>
                        <p class="card-text">失败任务</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.avatar-placeholder {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table td {
    padding: 0.5rem 0;
}

.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    border-radius: 15px 15px 0 0 !important;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
function exportUserData() {
    // 创建用户数据导出
    const userData = {
        username: '{{ current_user.username }}',
        email: '{{ current_user.email }}',
        created_at: '{{ current_user.created_at.strftime("%Y-%m-%d %H:%M:%S") if current_user.created_at else "未知" }}',
        last_login: '{{ current_user.last_login.strftime("%Y-%m-%d %H:%M:%S") if current_user.last_login else "首次登录" }}',
        is_admin: {{ 'true' if current_user.is_admin else 'false' }},
        is_active: {{ 'true' if current_user.is_active else 'false' }},
        export_time: new Date().toLocaleString('zh-CN')
    };
    
    // 转换为JSON字符串
    const dataStr = JSON.stringify(userData, null, 2);
    const dataBlob = new Blob([dataStr], {type: 'application/json'});
    
    // 创建下载链接
    const link = document.createElement('a');
    link.href = URL.createObjectURL(dataBlob);
    link.download = `user_data_${userData.username}_${new Date().toISOString().split('T')[0]}.json`;
    link.click();
    
    // 显示成功消息
    if (typeof Swal !== 'undefined') {
        Swal.fire({
            icon: 'success',
            title: '导出成功',
            text: '用户数据已成功导出',
            timer: 2000,
            showConfirmButton: false
        });
    } else {
        alert('用户数据导出成功！');
    }
}
</script>
{% endblock %} 